<template>
  <div>
    <!-- 内容 -->
    <div>
      <!-- search -->
      <div class="query-form" v-if="'query' == props.mode">
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="title" placeholder="搜索电影名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button type="danger" @click="reset">重置</el-button>
            </el-button-group>
            <el-button type="success" style="margin-left: 1rem" @click="showAdd">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- info -->
      <div>
        <el-table :data="filmList">
          <el-table-column
            label="电影编号"
            prop="mid"
            width="150"
            v-if="'query' == props.mode"
          ></el-table-column>
          <el-table-column label="电影名称" prop="title" width="300"></el-table-column>
          <el-table-column label="电影简介" prop="intro"></el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button
                type="warning"
                size="small"
                @click="showModify(scope.row)"
                v-if="'query' == props.mode"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="delFilm(scope.row)"
                v-if="'query' == props.mode"
                >删除</el-button
              >
              <el-button
                type="success"
                size="small"
                v-if="'selector' == props.mode"
                @click="selectType(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- page -->
      <div class="page">
        <el-pagination
          v-model:current-page="pageInfo.pageNumber"
          v-model:page-size="pageInfo.pageSize"
          :total="pageInfo.total"
          :page-sizes="[2, 5, 10, 15]"
          @size-change="getFilm"
          layout="prev,pager,next,total,sizes"
          @current-change="getFilm"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 添加的对话框 -->
    <div>
      <el-dialog v-model="avisible" @closed="search" title="添加电影" width="600">
        <div>
          <el-form>
            <el-form-item>
              <el-input v-model="addInfo.title" placeholder="请输入电影名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="addInfo.intro"
                placeholder="请输入电影简介"
                type="textarea"
                rows="5"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <template #footer>
          <el-button type="success" @click="addFilm">确定</el-button>
          <el-button type="danger" @click="resetAdd">取消</el-button>
        </template>
      </el-dialog>
    </div>

    <!-- 修改的对话框 -->
    <div>
      <el-dialog v-model="mvisible" @closed="search" title="修改电影信息" width="600">
        <div>
          <el-form>
            <el-form-item>
              <el-input v-model="modifyInfo.title" placeholder="请输入电影名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="modifyInfo.intro"
                placeholder="请输入电影简介"
                type="textarea"
                rows="5"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <template #footer>
          <el-button type="warning" @click="modifyFilm">确定</el-button>
          <el-button type="danger" @click="resetmodify">取消</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '@/js/ajax'
import { tools } from '@/js/tools'
import { ElMessage, ElMessageBox } from 'element-plus'

//#region 选择部分
const props = defineProps(['mode'])
const emits = defineEmits(['type-selected'])

const selectType = (info) => {
  emits('type-selected', info)
}

//#endregion

//#region 获取数据
const pageInfo = ref({
  pageSize: 10,
  pageNumber: 1,
})
const title = ref('')
const filmList = ref([])

const getFilm = () => {
  api.get(
    `/crud/movie/${pageInfo.value.pageSize}/${pageInfo.value.pageNumber}`,
    { title: title.value },
    (data) => {
      if (data.success) {
        filmList.value = data.data.data
        pageInfo.value = data.data.pageBean
        return
      }
      ElMessageBox.alert(data.message, '电影查询失败')
    },
  )
}
onMounted(() => {
  getFilm()
})

const search = () => {
  pageInfo.value.pageNumber = 1
  getFilm()
}
const reset = () => {
  title.value = ''
  pageInfo.value.pageNumber = 1
  getFilm()
}
//#endregion

//#region 添加
const avisible = ref(false)
const addInfo = ref({
  title: '',
  intro: '',
})
const addFilm = () => {
  api.post('/crud/movie', addInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message)
      resetAdd()
      return
    }
    ElMessageBox.alert(data.message, '添加失败')
  })
}
const showAdd = () => {
  addInfo.value = { title: '', intro: '' }
  avisible.value = true
}
const resetAdd = () => {
  addInfo.value = { title: '', intro: '' }
  avisible.value = false
}
//#endregion

//#region 修改
const mvisible = ref(false)
const modifyInfo = ref({
  title: '',
  intro: '',
})
const modifyFilm = () => {
  api.put('/crud/movie', modifyInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message)
      resetmodify()
      return
    }
    ElMessageBox.alert(data.message, '修改失败')
  })
}
const showModify = (info) => {
  mvisible.value = true
  modifyInfo.value = tools.mergeJson(info)
}
const resetmodify = () => {
  modifyInfo.value = { title: '', intro: '' }
  mvisible.value = false
}
//#endregion

//#region 删除
const delFilm = (mid) => {
  ElMessageBox.alert(`确定要删除: ${mid.title} 吗?`, '删除电影', { type: 'warning' })
    .then(() => {
      api.delete(`/crud/movie/${mid.mid}`, {}, (data) => {
        ElMessage({
          message: data.message,
          type: data.success ? 'success' : 'error',
        })
        search()
      })
    })
    .catch(() => {})
}
//#endregion
</script>

<style scoped></style>
